import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { observer} from 'mobx-react';
import { Icon } from 'weaver-mobile';
import classnames from 'classnames';

@withRouter
@observer
export default class ListItem extends Component {
    render(){
        const {store, data} = this.props;

        const clz = classnames({
            selected: true,
            selected_hide: (data.id != store.selectedLocationId)
        })
        return (
            <div key={`near-${data.id}`} className='item' onClick={() => store.onLocationChangeHandle(data.id)}>
                <div className='info'>
                    <div className='name text-elli'>{data.name}</div>
                    <div className='address text-elli'>{data.address}</div>
                </div>
                <div id={data.id} className={clz}>
                    <Icon type='check' size='xs' color='#55B1F9'/>
                </div>
            </div>
        )
    }
}